<template>
	<view class="container">

		<!-- 小程序头部兼容 -->
		<!-- #ifdef MP -->
		<view class="mp-search-box">
			<input class="ser-input" type="text" value="输入关键字搜索" disabled @touchstart="mpToSearch" />
		</view>
		<!-- #endif -->

		<!-- 头部轮播 - customize -->
		<UniSwipe></UniSwipe>

		<!-- 分类 -->
		<UniCateSection></UniCateSection>

		<!-- 横图 -->
		<view class="ad-1">
			<image src="@/static/temp/ad1.jpg" mode="scaleToFill"></image>
		</view>

		<!-- 秒杀楼层 -->
		<UniSeckillSection></UniSeckillSection>
		
		<!-- 热卖商品 -->
		<UniHotSection></UniHotSection>
		
		
		<!-- #ifdef H5 -->
		<keep-alive>
			<uni-footer></uni-footer>
		</keep-alive>
		<!-- #endif -->
		<!-- #ifndef MP -->
		<keep-alive>
			<uni-overlay></uni-overlay>
		</keep-alive>
		<!-- #endif -->
	</view>
</template>

<script>
	import {
		mapMutations
	} from 'vuex';
	import UniSwipe from '@/components/home/uni-swipe.vue'
	import UniCateSection from '@/components/home/uni-cate-section.vue'
	import UniSeckillSection from '@/components/home/uni-seckill-section.vue'
	import UniHotSection from '@/components/home/uni-hot-section.vue'
	export default {
		components: {
			UniSwipe,
			UniCateSection,
			UniSeckillSection,
			UniHotSection
		},
		data() {
			return {};
		},

		methods: {
			/**
			 * Vuex
			 */
			...mapMutations(['changeSlider'])
			
			/**
			 * 小城需特有输入框
			 */
			// #ifdef MP
			,mpToSearch() {
				uni.navigateTo({
					url: '/pages/product/list'
				})
			}
			// #endif
			
			/**
			 * NOTE: [ pages.json > pages > 首页 > style > app-plus > titleNView ] 这个属性设置的本页面的标题(因此关于head的方法是默认的)
			 */
			// #ifndef MP
			,onNavigationBarSearchInputClicked: function() {
				// 标题栏input搜索框点击
				uni.navigateTo({
					url: '/pages/product/list'
				})
			}
			,onNavigationBarButtonTap(e) {
			// 点击导航栏 buttons 时触发
				const index = e.index;
				if (index === 0) {
					this.$api.msg('点击了扫描');
				} else if (index === 1) {
					this.changeSlider()
				}
			}
			// #endif
		}
	}
</script>

<style lang="scss">
	// 整个页面
	page {
		background: #f5f5f5;
	}

	// 使H5页面的自定义tabbar不遮盖内容
	/* #ifdef H5 */
	.container {
		padding-bottom: 120upx;
	}

	/* #endif */

	// 小程序搜索框
	/* #ifdef MP */
	.mp-search-box {
		position: absolute;
		left: 0;
		top: 30upx;
		z-index: 9999;
		width: 100%;
		padding: 0 80upx;

		.ser-input {
			flex: 1;
			height: 56upx;
			line-height: 56upx;
			text-align: center;
			font-size: 28upx;
			color: $font-color-base;
			border-radius: 20px;
			background: rgba(255, 255, 255, .6);
		}
	}

	/* #endif */



	// 横图的样式
	.ad-1 {
		width: 100%;
		height: 210upx;
		padding: 10upx 0;
		background: #fff;

		image {
			width: 100%;
			height: 100%;
		}
	}
	
	// 每个模块都有margintop
	.m-t {
		margin-top: 16upx;
	}
</style>
